<template>
  <div class="contentWrapper wpx1200" id="contentWrapper">
    <el-card class="box-card mt20" >
		  <div slot="header" class="clearfix">
		    <span v-text="'任务名称:' + taskName"></span>
		    <span class="cursor lan" @click="editName(taskId)">编辑</span>
		  </div>
		  <div class="clearFix">
		  	<div class="wrapper">
			  	<div class="imgWrapper" v-for="(item,index) in result">
			  		<img :src="'http://47.106.160.27/sysfile/'+item.checkImg + '?' +new Date().getTime()" alt=""  width="100%" height="100%" alt="待检测图片" class="cursor" @click="select(index)"/>
			  		<i class="el-icon-close delimg cursor" @click="delImg(index)"></i>
			  		<span class="tri"></span>
			  	</div>
			  </div>
			  <div class="wrapper">
					<!-- <img :src="bigImg" alt="" width="100%"/> -->
					<!-- <pic-zoom :url="bigImg" :scale="3"></pic-zoom> -->
					<img-zoom :src="bigImg" width="100%"  :bigsrc="bigImg" :configs="configs" v-show="bigImg"></img-zoom>
			  </div>
			  <div class="wrapper" id="pdfDom">
					<div class="textarea ml30 overflowY" id="result"></div>
			  </div>
		  </div>
		  
		  <div class="">
					<div class="mt50 mb30 pb40 clearFix">
							<div class="floatl mr25">
									<el-button size="small" @click="clearAll">全部清空</el-button>
							</div>
							<!--<div class="floatl mr25">
									<el-button size="small" type="primary" @click="download">全部下载</el-button>
							</div>-->
							<div class="floatr mr25">
									<el-button type="primary" size="small" @click="download">下载结果</el-button>
							</div>
							<div class="floatr mr25 mt5">
								敏感词数：<span class="jv" v-text="keyNum">0</span>
							</div>
							<div class="floatr mr25 mt5">
								文字总数：<span v-text="wordNum">0</span>
							</div>
							<!--<div class="floatl">
								<router-link to="/imgCheck">
									<el-button  size="small">重新检测</el-button>
								</router-link>
							</div>-->
					  </div>
				</div>
		</el-card>
  </div>
</template>

<script>
	import API from "@/api"
	// import PicZoom from 'vue-piczoom'
	import imgZoom from 'vue2.0-zoom'
export default {
  name: 'imgResult',
   components: {
	// PicZoom
	imgZoom 
  },
  data () {
    return {
			result:[],
			imgKeyWordNum:'',
			htmlTitle: '文图灵辨图片检测结果',
			keyNum:'',
			wordNum: "",
			keyNum:"",
			taskName: "",
			bigImg:"",
			taskId:"",
			configs: {
				width:390,
				height:390,
				maskWidth:100,
				maskHeight:100,
				maskColor:'#0d253f',
				maskOpacity:0.2
			}
    }
  },
  created: function () {
  	
  },
  mounted: function(){
  	this.checkData()
  	setMinHeight("contentWrapper")
  		$(window).resize(function() {
		  setMinHeight("contentWrapper")
		});
			this.init()
//	this.getNum()
  },
  beforeDestroy: function(){
	  	sessionStorage.setItem("setdata",'')
	},
  methods: {
		editName(id){
// 		console.error(id)
   		this.$prompt('请输入新任务名', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          lockScroll: false
        }).then(({ value }) => {
        	var checkInfo = {
        		token: API.header.getCookie("token"),
        		Obj:{
        			taskId:id,
        			taskName:value,
        		}
        	}
         	API.check.editTaskName(checkInfo).then(({data}) => {
			       if(data.code=='0'){
			       		this.taskName = data.data.taskName;
			       		this.$message.success("修改成功")
			       }else{
							this.$message.error(data.msg);
			       }
		      })
          
        }).catch(() => {});
   	},
  	clearAll(){
  		this.result = [];
  		this.bigImg = "";
  		$("#result").html("");
  	},
  	download(){
  		API.check.download(API.header.getCookie("token"),"poi/downzip/" + this.taskId).then(({data}) => {
	       		window.open("http://47.106.160.27/sysfile/" + data,'_blank');
      })
  	},
  	delImg(index) {
	 		this.result.splice(index, 1)
//	 		console.info(this.imgArr)
				
	 	},
  	init(){
				if(window.location.href.indexOf("?")!=-1){
					var id = this.$route.query.id;
					var mess = {
			  		token:API.header.getCookie("token"),
			  		id:id
			  	}
			  	API.record.getDetail(mess).then(({data}) => {
//			  			this.loading = false
			       if(data.code=='0'){
								this.result = data.data;
//								this.taskName = (this.result)[0].taskName
			       }else{
								this.$message.error(data.msg);
			       }
		      })
				}
			},
	  checkData(){
	  		if(sessionStorage.getItem("imgResult")){
		  		var data = JSON.parse(sessionStorage.getItem("imgResult"));
					this.result = data;
					this.taskName = decodeURIComponent(this.$route.query.taskName);
					this.taskId = data[0].taskId;
		  	}
	  		this.imgKeyWordNum = sessionStorage.getItem("imgKeyWordNum")
	  		
	  	},
			getNum(){
				var arr = this.result;
				var that = this;
				var keywordArr = sessionStorage.getItem("imgWordList").replace(new RegExp('，','g'),',').split(" ");
				var html = '';
				$.each(arr, function(index,val) {
//					console.error(val.checkResult)
						for(var i=0;i<keywordArr.length;i++){
							if(keywordArr[i] !=''){
								html+=val.checkResult.replace(new RegExp(keywordArr[i],'g'),'<span class="bgwarn">' + keywordArr[i] + '</span>')
								if(val.checkResult.indexOf(keywordArr[i]) != -1){
									
									that.result[index].userId = true
//									console.error(that.result)
								}
							}
			  		}					
				});
//		  	document.getElementById("result").innerHTML = html
//		  	this.keyNum = document.getElementsByClassName("bgwarn").length 
			},
			select(num){
				this.bigImg = baseFileUrl + this.result[num].checkImg + '?' + new Date().getTime();
				var result = this.result[num].checkContext;
				
				var keywordArr = sessionStorage.getItem("imgWordList").replace(new RegExp('，','g'),',').split(" ");
				var html = '';
				for(var i=0;i<keywordArr.length;i++){
					if(keywordArr[i] !=''){
						
							result=result.replace(new RegExp(keywordArr[i],'g'),'<span class="bgwarn">' + keywordArr[i] + '</span>')
						
						
					}
	  		}					
//				console.error(html,keywordArr)
		  	document.getElementById("result").innerHTML = result;
		  	this.wordNum = result.length;
		  	this.keyNum = document.getElementsByClassName("bgwarn").length;
//		  	this.keyNum = document.getElementsByClassName("bgwarn").length 
			}
	}
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.wrapper{
	  width: 342px;
    float: left;
    padding: 10px;
    border: 1px solid #eee;
    margin: 0px 10px;
    height: 500px;
    overflow-y: auto;
}
.imgWrapper {
  	width: 138px;
    height: 138px;
    float: left;
    margin: 8px;
    position: relative;
}
.delimg {
		position: absolute;
    top: 3px;
    right: 0;
    color: #fff;
    z-index: 999;
}
.tri{
  	display: inline-block;
    border-top: 0px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 30px solid transparent;
    border-right: 30px solid rgba(0,0,0,0.5);
    position: absolute;
    right: 0;
    top: 0;
}

</style>
